<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div>
    <div class="bfff">
      <div style="height: 1px;background: #EFEFEF;width:100%"></div>
      <uv-tabs @click="tabTap" :itemStyle="{fontSize: '32rpx',fontWeight: 500, height: '80rpx'}" :customStyle="{ height: '80rpx' }" :current="current" :inactiveStyle="{ color: '#999' }" :activeStyle="{ color: '#333' }" lineColor="#E60012" border :list="[{ name: '已上架', sort: 'all', badge: { value: total0, } }, { name: '已下架', sort: 'member_num', badge: { value: total1, } }]"></uv-tabs>
    </div>
    <div class=" oy " >
      <scroll-view scroll-anchoring :refresher-triggered="isRefreshing" :refresher-enabled="true" scroll-y scroll-top="0" @refresherrestore="onRefresherRestore" @refresherrefresh="bindrefresherrefresh" @scrolltolower="onReachBottom" style="height: calc(100vh - 45px - 80rpx - 100rpx)">
        <div class="p1757558715  ">
          <view class="mt20 bfff" v-for="(item,index) in tableData" :key="index">
            <div class="pl30 pb30 pt30 pr30" style="border-bottom: 2rpx solid #eef0f0">
              <div class="f ">
                <img class="p1757559471" :src="item.image" alt="">
                <div class="p1757559797 pl30">
                  <div class="w100  single-line fw500 fz30 ">{{item.store_name}}</div>
                  <div class="lh1 pt20 f" style="color: #6D6D6D">
                    <div class="dib  fz28">累计销量 {{ item.sales }}</div>
                    <div class="dib  fz28 pl30">库存 {{item.stock}}</div>
                  </div>
                  <div class="lh1 fz30 pt10 fw500" style="color: #DE0012">¥ {{item.price}}</div>
                  <div class="p1757560950 pt20">
                    <button v-if="current == 1" @click="commonButtonTap(1, item.id)" class="common-button p1757560635  pl15 pr15 mr10 fz26" style="">删除</button>
                    <button @click="commonButtonTap(5, item.id)" class="common-button p1757560635 pl15 pr15 mr10  fz26" style="">改库存</button>
                    <button @click="commonButtonTap(4, item.id)" class="common-button p1757560635  pl15 pr15 mr10 fz26" style="">改价</button>
                    <button @click="commonButtonTap(6, item.id)" class="common-button p1757560635  pl15 pr15 mr10 fz26" style="">编辑</button>
                    <button v-if="current == 0" @click="commonButtonTap(3, item.id)" class="common-button p1757560635  pl15 pr15  fz26" style="border-color: #D60012 !important;color: #D60012 !important;">下架</button>
                    <button v-if="current == 1" @click="commonButtonTap(2, item.id)" class="common-button p1757560635  pl15 pr15  fz26" style="border-color: #D60012 !important;color: #D60012 !important;">上架</button>
                  </div>
                </div>
              </div>
            </div>
          </view>
          <div class="common-empty" v-if="tableData.length === 0 && isOnce">
            <uv-empty mode="data" />
          </div>
          <div v-if="tableData.length" class="pb20">
            <uv-load-more fontSize="28rpx" :status="status" />
          </div>
        </div>
      </scroll-view>
    </div>
    <button @click="navigateToTap" class="common-button fw500 fz32 w100 c333  p1757563213" style="height: 100rpx;">
      <uv-icon size="34rpx" color="#EA5514" name="plus"></uv-icon>
      <div class="pl20 lh1">新建商品</div>
    </button>
    <div class="lh1 bfff">
      <uv-safe-bottom />
    </div>

    <uv-modal :textStyle="{color: '#333'}" ref="modal" align="center" title="" showCancelButton :content="modelMessage[modelType]" confirmColor="#D60012" cancelText="取消" confirmText="确定" @cancel="cancelDelTap" @confirm="confirmTap"></uv-modal>
  </div>
</template>

<script>

import myLayOutVue from './components/layOut.vue'
import { merchantClassifyList, merchantProfileList, delGoods, setUpApi, goodsIsUpNum } from "@/api/merchant.js";
import commonMixin from "./mixin/common.js";

export default {
  components: {
    'u-my-layOut': myLayOutVue,
  },
  mixins: [commonMixin],
  data() {
    return {
      modelType: 1,
      modelMessage: {
        1: '确定删除该商品吗？',
        2: '确定上架该商品吗？',
        3: '确定下架该商品吗？',
      },
      current: 0,
      total0: 0,
      total1: 0,
      activeId: null,
      communityForm: {},
      statusBarHeight: 0,
      list: [],
      pageEl: {
        mainHeight: 100
      },
      isOnShow: false,
      form: {
        is_up: 1,
        limit: 10,
        category_id: null,
        page: 1
      },
      tabList: [{ name: '已上架', sort: 'all', badge: { value: 5, } }, { name: '已下架', sort: 'member_num', badge: { value: 5, } }]
    }
  },
  onHide() {
    this.isOnShow = true
  },
  onShow() {
    this.current_page = 0
    this.tableData = []
    if (this.isOnShow) this.initPage()
    try {
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight || uni.getMenuButtonBoundingClientRect().top;
    } catch (error) {
    }
  },
  onLoad() {
    uni.removeStorage({ key: 'storageForm' });
    this.initPage()
  },
  methods: {
    cancelDelTap() {
      this.$refs.modal.close();
      this.activeIndex = null
    },
    commonButtonTap(type, id) {
      this.modelType = type
      this.activeId = id
      if (type == 4) uni.navigateTo({ url: '/pages-merchant/priceAdjustment?id=' + id });
      if (type == 5) uni.navigateTo({ url: '/pages-merchant/modifyInventory?id=' + id });
      if (type == 6) uni.navigateTo({ url: '/pages-merchant/product/launch?id=' + id });
      if (type == 1) {
        this.$refs.modal.open()
      }
      if (type == 3 || type == 2) {
        this.$refs.modal.open()
      }
    },
    confirmTap() {
      if (this.modelType == 3 || this.modelType == 2) {
        uni.showLoading({ title: '请求中', mask: true })
        setUpApi({ status: this.modelType == 3 ? 0 : 1, id: this.activeId }).then(res => {
          if (res.code === 200) {
            uni.$uv.toast('操作成功')
            setTimeout(() => {
              this.current_page = 0;
              this.$set(this.form, 'page', 1);
              this.$nextTick(() => {
                this.initPage(() => {
                  this.tableData = [];
                });
              });
            }, 500)
          }
        })
      }
      if (this.modelType == 1) {
        uni.showLoading({ title: '请求中', mask: true })
        delGoods(this.activeId).then(res => {
          if (res.code === 200) {
            uni.$uv.toast('删除成功')
            setTimeout(() => {
              this.current_page = 0;
              this.$set(this.form, 'page', 1);
              this.$nextTick(() => {
                this.initPage(() => {
                  this.tableData = [];
                });
              });
            }, 500)
          }
        })
      }

    },
    _initList() {
      uni.removeStorage({ key: 'storageForm' });
      merchantClassifyList().then(res => {
        if (res.code == 200) {
          this.list = res.result.map(i => {
            i.tableData = []
            return i
          })
          this.$set(this.form, 'category_id', res.result[0].id)
          this.$nextTick(() => {
            this.initPage()
          })
        }
      })
    },
    tabTap(value) {
      if (value.index == this.current) return
      this.current_page = 0;
      this.tableData = []
      this.current = value.index
      this.$set(this.form, 'page', 1);
      this.$set(this.form, 'is_up', value.is_up);
      this.$nextTick(() => {
        this.initPage(() => {
        });
      });
    },
    initPage(cb = () => { }) {
      uni.removeStorage({ key: 'storageForm' });
      this.isOnce = false
      if (this.form.page == this.current_page) return
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      // this.$set(this.form, 'category_id', null)
      let form = JSON.parse(JSON.stringify(this.form))
      form.is_up = this.current == 0 ? 1 : 0
      merchantProfileList(form).then(res => {
        this.isRefreshing = false
        this.isOnce = true
        if (res.code === 200) {
          cb()
          uni.hideLoading()
          let data = res.result && res.result.data && JSON.parse(JSON.stringify(res.result.data));
          this.total = res.result.total;
          this.current_page = res.result.current_page;
          this.tableData = this.tableData.concat(data);
          if (this.total <= this.tableData.length) this.status = "nomore";
          goodsIsUpNum().then(res1 => {
            if (res1.code === 200) {
              this.total0 = res1.result.number_shelves
              this.total1 = res1.result.number_take_down
            }
          })
        }
      }).catch(() => {
        uni.hideLoading()
        this.isRefreshing = false
        this.isOnce = true
      })
    },
    navigateToTap() {
      uni.navigateTo({
        url: '/pages-merchant/product/launch'
      });
    },
    layOutChange(value) {
      this.pageEl = value
    },
    change(index) {
      this.current_page = 0
      this.vtabCurrent = index
      this.list[this.vtabCurrent].tableData = []
      this.$set(this.form, 'category_id', this.list[index].id)
      this.$nextTick(() => {
        this.initPage()
      })
    }
  }
}
</script>
<style>
page {
  background-color: #f7f8f8;
  color: #333;
}
</style>
<style lang="scss" scoped>
@import "./common.scss";
.p1757299303 {
  background: #fff;
}
.p1757559471 {
  border-radius: 10rpx;
  width: 130rpx;
  height: 130rpx;
  border: 1rpx solid #e6e6e6 !important;
}
.p1757560635 {
  color: #333333 !important;
  border-radius: 6rpx !important;
  overflow: hidden !important;
  border: 2rpx solid #9fa0a0 !important;
  padding-top: 8rpx !important;
  padding-bottom: 8rpx !important;
}
.p1757563213 {
  background: #ffffff !important;
  box-shadow: 0rpx -3rpx 10rpx 0rpx #dedede !important;
  border: none !important;
  border-radius: 0rpx !important;
}
</style>

